<template>
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'接单报名详情'" :autoBack="true" leftIconColor="$uni-text-color"
        :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }" >
			<view class="header" v-if="details">
				<view class="title">{{details.title}}</view>
				<view class="item">
					<image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`" mode="scaleToFill"/>
					<view class="nowrap">{{details.address}}</view>
				</view>
				<view class="item">
					<image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill"/>
					<view class="nowrap">{{details.date}} {{ details.start_time}} ~ {{ details.end_time }}</view>
				</view>
			</view>
			<view class="content">
				<scroll-view scroll-y class="scroll_box " v-if="lists.length"   @scrolltolower='listScrolltolower'
        show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
        :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
        @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" >
					<view v-for="i in lists" :key="i.id">
						<view class="list_item_title">
							<image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`"
								mode="scaleToFill" v-if="i.source == 1" />
							<image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`"
								mode="scaleToFill" v-else />
							<view class="titlename">{{ i.title }}</view>
						</view>
                          <!-- 代理商金额修改 -->
                          <view class="agent_money" v-if="i.source == 2">
                            <view class="left">
                                <view class="left_title" >
                                    代理商金额(男/女)：
                                    <text v-if="!i.agent">
                                            ￥{{ i.schedule.agent_man_salary }}
                                        </text>
                                        <text v-else>
                                            ￥{{ i.agent.agent_man_salary_max }}
                                        </text>
                                        /
                                        <text v-if="!i.agent">
                                            ￥{{ i.schedule.agent_woman_salary }}
                                        </text>
                                        <text v-else>
                                            ￥{{ i.agent.agent_woman_salary_max }}
                                        </text>

                                </view>
                            </view>
                           
                            <view class="right" @tap="editAgentMoney(i)" v-if="i.schedule.state <= 1">
                                <image
                                    :src="`${baseUrl}/uploads/uniapp_image/user_v1/shangjixiangqing_icon_xiugaijine@2.png`"
                                    mode="scaleToFill" />
                                <view>修改</view>
                            </view>
                        </view>
						<view class="list_item" v-for="(item, index) in i.list" :key="index">
							<!-- 头像 -->
							<view class="head_box ">
								<image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
								<view class="displaySwitch" >
									<image v-if="item.user.gender == 0" :src="`${baseUrl}/uploads/uniapp_image/staff_v1/personal__icon_woman.png`" mode="scaleToFill"/>
									<image v-else :src="`${baseUrl}/uploads/uniapp_image/staff_v1/personal_icon_man.png`" mode="scaleToFill"/>
								</view>
							</view>
							<!-- 信息盒子 -->
							<view class="message_box">
								<view class="message_title">{{ item.user.nickname }}</view>
								<view class="message_identity">
								<view class="dialPhone" @tap="dialPhone(item.user.mobile)">
									   <!-- 电话标 -->
									<view class="phone_sign">
										<image
											:src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_callnumber.png`"
											mode="scaleToFill" />
									</view>
									<!-- 手机号码 -->
									<view class="phone_number">{{ item.user.mobile }}  </view>
								</view>	

								</view>
								<view class="mes_flex">
									<view class="message_time">
										<view class="message_time">
											{{ formatDatetime(item.createtime )}}
										</view>
									</view>
								</view>
							</view>
							 <!-- 金额 -->
							 <view class="add_right" v-if="i.source == 1">
								<!-- v-if=" " -->
                                <view class="gold_coin" v-if="item.state <= 1 ">
                                    <text>￥</text>
                                    <view>
                                        <u-input type="digit" :color="'#0038F7' "
                                            v-model="item.salary" @blur="money_change(item, $event)"></u-input>
                                    </view>
                                </view>
                            </view>
							<view class="add_right" v-else>
                                <view class="disabled_gold_coin" >￥{{ item.salary }}</view>
                            </view>

						</view>
					</view>
					<!-- 加载中 && 没有更多数据了 -->
					<view>
					<s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
					</view>
                </scroll-view>
                    <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
			</view>
		</view>
	</s-layout>	
  <!-- 设置金额弹出层 代理商金额上限-->
  <s-public-models :click_type="dataToinformaion.click_type" :list="editAgentMoney_list" :show="agencyshows"
        :imagesucceedSrc="dataToinformaion.imageSrc" :subtitle="dataToinformaion.subtitle" :hint="dataToinformaion.hint"
        :editAgency="true" @cancel="agencyMoneyClose" @affirm="agencyMoneySubmit"></s-public-models>
</template>

<script setup>
import { ref  } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
import { baseUrl } from '@/sheep/config';
import tools from '@/sheep/helper/tools.js';
import { formatDatetime } from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync();
//人员列表
const  schedule_id = ref()
onLoad((options) => {
	schedule_id.value =  options.id
	listpagenumber.value = 1;
    lists.value = []
    getlist()
	getScheduleView()
});
// 金额输入框
const salary = ref()
const totalids = ref()
const money_change = (item, e) => {
    salary.value = e
    totalids.value = item.id
    uni.$u.throttle(() => {
        amendEdit('salary')
    }, 500)
};
const amendEdit = async (i) => {
    let params = {
        ids: totalids.value,
        schedule_id: schedule_id.value
    }
	params.salary = salary.value,
	params.batch = 1
    const res = await sheep.$api.project.postScheduleUserEdit(params);
    if (res.code == 1) {
        sheep.$helper.toast(res.msg);
        setTimeout(() => {
            listpagenumber.value = 1;
            lists.value = []
            totalids.value = ''
            getlist();
        }, 500)
    } else {
        sheep.$helper.toast(res.msg);
    }

}
// 人员列表
const lists = ref([])//代理上列表
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const getlist = async () => {
	let params ={
		schedule_id:schedule_id.value,
		page: listpagenumber.value
	}
    const res = await sheep.$api.project.getScheduleUserIndex(params);
    if (res.code == 1) {
		lists.value = [...lists.value, ...res?.data.rows];
		listPage.value = res.data.current_page
		listlast_page.value = res.data.last_page
    }
}

// 详情内容
const details = ref()
const getScheduleView = async () => {
  let params = {
    ids: schedule_id.value,
  }
  const res = await sheep.$api.project.getScheduleView(params);
  details.value  =  res.data
}
const loadmoreRef = ref()
//滚动触底
const listScrolltolower = () => {
  loadmoreRef.value.PopupScrolltolower()
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1 ;
  } else {
    return;
  }
  getlist();
};
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
  if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
  triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
  if (freshing.value) return;
  freshing.value = true;
  setTimeout(() => {
    listpagenumber.value = 1;
    lists.value = []
    triggered.value = false;
    freshing.value = false;
    getlist();
  }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = 'restore'; // 需要重置
  // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
  // console.log("onAbort");
}
// 拨打电话
const dialPhone = (e) => {

    tools.callPhone(e)
}

//代理商金额修改
//工时弹窗
const share_id = ref()
const dataToinformaion = ref({
    subtitle: '批量设置金额',
    imageSrc: '',
    hint: '',
    distinction: '',
    click_type: ''
})
const agencyshows = ref(false)
const editAgentMoney_list = ref()
const editAgentMoney_id = ref()
const editAgentMoney = (e) => {  
    if (e.agent) {
    editAgentMoney_list.value = e.agent
    dataToinformaion.value.click_type = 'agencyCap'
    }else{
        editAgentMoney_list.value = e.schedule
        dataToinformaion.value.click_type = 'agency'
    }
     share_id.value = e.share_id
    editAgentMoney_id.value = e.id
    agencyshows.value = true
    dataToinformaion.value.subtitle = '修改代理商金额'
    dataToinformaion.value.hint = '修改金额后会覆盖已修改的金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
}
const agencyMoneyClose = () => {
    agencyshows.value = false
}
// 取消按钮
const agencyMoneySubmit = async (e, i, a) => {
    console.log(e,i,a)

    let params = {
        share_id: share_id.value,
        schedule_id: schedule_id.value,
        agent_man_salary_max: e,
        agent_woman_salary_max: a
    }
    const res = await sheep.$api.agency.editAgentByScheduleid(params);
    if (res.code == 1) {
        sheep.$helper.toast(res.msg)
        lists.value =[]
        listpagenumber.value = 1;
        getlist()
        agencyshows.value = false
    } else {
        sheep.$helper.toast(res.msg)
        agencyshows.value = false
    }
}
</script>

<style scoped lang="scss">
// 头部
.wrap{
	width: 100%;
	height: 100%;
}
.header{
	width: calc(100% - 40rpx );
	margin: 20rpx auto;
	border-radius: 16rpx;
	background-color: #FFFFFF;
	box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
	height: 228rpx;
	margin-bottom: 20rpx;
	.title{
		height: 110rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: #333333;
		font-weight: 500;
		font-size: 32rpx;
	}
	.item{
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		image{
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		.nowrap{
			color: #666666;
			font-weight: 500;
			font-size: 26rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}

// 列表
.scroll_box {
    height: 70vh;
	width: calc(100% - 40rpx);
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	view{
		&:last-child{
			.list_item{
				&:last-child{
					border: none;
				}
			}
		}
	}
}

// 列表项
.list_item {
    height: 154rpx;
    display: flex;
    align-items: center;
    margin: 0 30rpx 40rpx 30rpx;
    position: relative;
    border-bottom: 1rpx solid #eee;
	padding-bottom: 10rpx;
    // 选择图标
    .select_image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 22rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 头像盒子
    .head_box {
        width: 104rpx;
        height: 104rpx;

        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    // 信息盒子
    .message_box {
        margin-left: 30rpx;

        .message_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 10rpx;
        }

        .message_identity {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 400;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			.dialPhone{
				display: flex;
				align-items: center;
			}
                    // 电话标
			.phone_sign {
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			  // 手机号码
			  .phone_number {
				color: $uni-color-primary;
				font-weight: 400;
				font-size: 24rpx;
				font-style: normal;
				text-decoration: none;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
        }

        .message_time {
            font-family: PingFangSC;
            color: #999;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            display: flex;

            text {
               margin-right: 10rpx;
               
            }
        }
    }
}

.list_item:first-child {
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    margin-top: 30rpx;
}

.list_item:last-child {
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    margin-bottom: 0;
}

// 执照员工代理商
.list_item_title {
    padding-left: 30rpx;
    height: 60rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;

    image {
        width: 30rpx;
        height: 30rpx;
    }

    .titlename {
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
        margin-left: 10rpx;
    }
}
.head_box {
      // 显示开关盒子
      .displaySwitch {
        position: relative;
        image {
          height: 30rpx;
          width: 30rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    .add_right {
     display: flex;
	 justify-content: center;
	 align-items: center;
	 position: absolute;
        top: 42rpx;
        right: 20rpx;
        z-index: 1;
    }

    // 金额
    .gold_coin {
        width: 156rpx;
        height: 52rpx;
        padding-left: 20rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: 400;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        border-radius: 8rpx;
        text-align: center;
        line-height: 52rpx;
        background-color: #F9FBFF;
        border: 1rpx solid rgba(0, 56, 247, 0.3);
        box-shadow: 0 1rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;

        image {
            width: 20rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }
    }
    .disabled_gold_coin {
        width: 156rpx;
        height: 52rpx;
        padding-left: 20rpx;
        color: #F7AF00;
        font-weight: 400;
        font-size: $uni-font-size-26;
        display: flex;
        align-items: center;
    }
    // 代理商金额修改
.agent_money {
    display: flex;
    width: calc(100% - 80rpx);
    height: 52rpx;
    border-radius: 8rpx;
    background-color: #F9FBFF;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx auto;
    padding: 0 20rpx;

    .left {
        display: flex;
        .button{
            width: 70rpx;
            color: #FFFFFF;
            font-weight: 400;
            font-size: 20rpx;
            height:28rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FF5100;
        }
        // 已设置
.have_set {
  font-family: PingFangSC;
  color: #0038F7;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FFFFFF;
  border: 1px solid #0038F7;
  width: 70rpx;
  height: 28rpx;
}

// 未设置
.Is_not_set {
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FF5100;
  width: 70rpx;
  height: 28rpx;
}
        image {
            width: 20rpx;
            height: 20rpx;
        }

        .left_title {
            color: #333333;
            font-weight: 500;
            font-size: 22rpx;

            text {
                color: #FF0000;
            }
        }
    }

    .right {
        display: flex;
        color: #0038F7;
        font-weight: 500;
        font-size: 22rpx;
        align-items: center;

        image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
        }
    }
}
</style>
